<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的选班</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type="text/javascript" src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type="text/javascript" src='../js/libs/sui/sm.js' charset='utf-8'></script>
    <script type="text/javascript" src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="../js/libs/juicer-min.js"></script>
    <script type="text/javascript" src="../js/libs/jquery.md5.js"></script>
    <script type="text/javascript" src="../js/api.js"></script>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
</head>
<body>
<div class="page">
    <!-- 标题栏 -->
    <header class="bar bar-nav">
        <a class="icon iconfont c-white pull-left" onclick="javascript:api.closeWin();">&#xe61f;</a>
        <!--<a class="icon icon-refresh pull-right"></a>-->
        <h1 class="title">我的选班</h1>
    </header>
    <div class="content bg-default">
        <!--班级选课-->
        <div class="my-choose-class">
            <div class="item-con">
                <!--<div class="head">JAVA课程</div>-->
                <div class="con">
                    <!--加上.choosed类表示已选-->
                    <!--
                    <div class="item choosed">
                        JAVA(1)班
                    </div>
                    -->
                    <!--
                    <div class="item">
                        JAVA(1)班(1)班JAVA(1)班JAVA(1)班
                    </div>
                    <div class="item">
                        JAVA(1)班
                    </div>
                    <div class="item">
                        JAVA(1)班
                    </div>
                    <div class="item">
                        2班
                    </div>
                    <div class="item">
                        3班
                    </div>
                    -->
                </div>
            </div>
        </div>
    </div>
</div>
<script id="choose-course-tpl" type="text/template">
    {@each courseList as it,index}
    <div class="head">&{it.class_type_name}</div>
    <div class="con">

        {# 该课程已开班}
        {@each it.class_type as clazz,index}

        {# choose_student_id 为0 表示该学生未选择该班级}
        {@if clazz.CHOOSE_STUDENT_ID==0}
        {@if clazz.CLASS_NAME!=null&&clazz.CLASS_NAME!=""}
        <div data-clazz-id="&{clazz.CLASS_ID}" data-clazz-type-id="&{it.class_type_id}" class="item">
            &{clazz.CLASS_NAME}
        </div>
        {@else}
        <div style="height: 4rem;justify-content: center;width: 100%;display: flex;align-items: center;">该课程未开班</div>
        {@/if}
        {# 否则加上已选标签}
        {@else}
        <div data-clazz-id="&{clazz.CLASS_ID}" data-clazz-type-id="&{it.class_type_id}" class="item choosed">
            {@if clazz.CLASS_NAME!=null&&clazz.CLASS_NAME!=""}
            &{clazz.CLASS_NAME}
            {@/if}
        </div>
        {@/if}
        {@/each}


    </div>
    {@/each}
</script>
<script type="text/javascript">
    apiready = function () {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });

        var stuInfo=getLoginStudentInfo();
        var stuId=stuInfo.STUDENT_ID;
//        var stuId='20884';
        var sql="SELECT s2.*, IFNULL(s4.STUDENT_ID,'0') AS CHOOSE_STUDENT_ID FROM ( SELECT s.STUDENT_ID, s.STU_NAME,s.CLASS_TYPE_ID,s.CLASS_TYPE_NAME,s1.CLASS_ID,s1.CLASS_NAME FROM stu_enroll s LEFT JOIN b_class s1 ON s.CLASS_TYPE_ID = s1.CLASS_TYPE_ID WHERE s.STUDENT_ID = '{0}') s2"+
        " LEFT JOIN (SELECT s3.STUDENT_ID, s3.CLASS_ID FROM s_student_class s3 WHERE s3.STUDENT_ID = '{1}') s4 ON s2.CLASS_ID = s4.CLASS_ID";
        var myCourseList; //用来验证学生是否已选该课程的班级


        dbQuery(1,10,sql.format(stuId,stuId),true,function(ret,err){

            if(isObject(ret)&&ret.statusCode==0){

                if(ret.result.length>0){

                    //按课程
                    var map={};
                    var dest=[];
                    for(var i=0;i<ret.result.length;i++){
                        var res=ret.result[i];
                        if(!map[res.CLASS_TYPE_ID]){
                            dest.push({
                                class_type_id:res.CLASS_TYPE_ID,
                                class_type_name:res.CLASS_TYPE_NAME,
                                class_type:[res]
                            });
                            map[res.CLASS_TYPE_ID]=res;
                        }else{
                            for(var j=0;j<dest.length;j++){
                                var dres=dest[j];
                                if(res.CLASS_TYPE_ID==dres.class_type_id){
                                    dres.class_type.push(res);
                                    break;
                                }
                            }
                        }
                    }
                    var courseData={
                        courseList:dest
                    }
                    myCourseList={
                        myCourses:dest
                    }

                    $(".item-con").html(juicer($("#choose-course-tpl").html(), courseData));

                }else{

                    toast("暂无课程");
                }

            }

        });

        //学生是否选班 true--已选  false--未选
        function isChooseClazz(clazzTypeId){

            for(var i=0;i<myCourseList.myCourses.length;i++){
                if(clazzTypeId==myCourseList.myCourses[i].class_type_id){

                    for(var j=0;j<myCourseList.myCourses[i].class_type.length;j++){

                        if(myCourseList.myCourses[i].class_type[j].CHOOSE_STUDENT_ID!=0){

                            return true;
                        }

                    }
                }

            }

            return false;
        }

        //选班
        function chooseClazz(clazzTypeId,clazzId){
            var r = confirm("确认是否选择该班级");
            if (r == true) {
                var chooseSql="INSERT INTO s_student_class (CLASS_ID,STUDENT_ID,BEGIN_DATE,FINISH_DATE) VALUES ('{0}','{1}','2016-09-01 12:00:00','2016-11-01 13:13:00')";
                dbExecute(chooseSql.format(clazzId,stuId),true,function(ret,err){

                    if(isObject(ret)&&ret.statusCode==0){

                        toast("选班成功");

                        //刷新页面
                        location.reload();
                    }else{

                        toast("选班失败");
                    }


                });
            }
        }


        $(".item-con").on("click",".con .item",function(){
            var $this=$(this);
            var clazzId=$this.data("clazzId");
            var clazzTypeId=$this.data("clazzTypeId");

            //未选班
            if(!isChooseClazz(clazzTypeId)){

                chooseClazz(clazzTypeId,clazzId);
            }else{

                toast("您已选过班了");
            }
        });
    };
</script>
</body>
</html>